<template>
  <header class="header">
    <h1>todos</h1>
    <input @click="opt" v-model="optValue" id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
        class="new-todo"
        placeholder="输入任务名称-回车确认"
        autofocus
        v-model.trim="name"
        @keydown.enter="setMssage"
    />
    </header> 
</template>

<script>
export default {
  data(){
    return{
    name:"",
    }
  },
  props:["list"],
  methods:{
    setMssage(){
      if(!this.name){
        alert('输入不能为空')
        return
      }
      this.$emit("setMssage",this.name)
      this.name=""
    },
    opt(){
      this.$emit("opt",this.optValue)
    }
  },
  computed:{
    optValue:{
      set(val){
        this.list.forEach(item=>item.isDone=val)
      },
      get(){
        if(this.list.length==0){
          return false
        }
        return this.list.every(item=>item.isDone)
      }
    }
  }
}
</script>